<template>
	<view class="container">
		<view v-if="weather" class="weather-info">
			<text class="title">明天天气预报</text>
			<text class="date">{{ weather.date }}</text>
			<text class="week">{{ weather.week }}</text>
			<text class="temp">最高温：{{ weather.high }}℃</text>
			<text class="temp">最低温：{{ weather.low }}℃</text>
		</view>
		<view v-else class="loading">加载中...</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weather: null
			};
		},
		onLoad() {
			this.getWeather();
		},
		methods: {
			getWeather() {
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					method: 'GET',
					success: (res) => {
						if (res.data.status == 200) {
							this.weather = res.data.data.forecast[1];
						} else {
							console.error('请求失败:', JSON.stringify(res));
						}
					},
					fail: (err) => {
						console.error('网络请求失败:', JSON.stringify(err));
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		justify-content: center;
		align-items: center;
		padding: 20px;
		text-align: center;
	}

	.weather-info {
		background-color: #f8f9fa;
		border-radius: 10px;
		padding: 20px;
		margin: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.date,
	.week,
	.temp {
		font-size: 28rpx;
		color: #666;
		line-height: 40rpx;
	}

	.loading {
		color: #999;
		font-size: 28rpx;
	}
</style>